import { StatusBar } from 'expo-status-bar';
import {
    StyleSheet,
    Text,
    View,
    Image,
    ScrollView,
    TouchableOpacity,
    FlatList,
    BackHandler,
    ToastAndroid,
    Button
} from 'react-native';
import { AntDesign } from '@expo/vector-icons';
import { Entypo } from '@expo/vector-icons';
import { useState, useEffect } from 'react';

import { NavigationContainer,useFocusEffect  } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

import Home from "./src/page/Home"
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Draft from './src/page/Draft';

const Tab = createBottomTabNavigator();
const Stack = createNativeStackNavigator();
// const Home = ({ navigation }) => {
//     const [num,setNum] = useState(0);
//     useEffect(()=>{
//         console.log('effect')
//     },[])
//     useFocusEffect (()=>{
//         console.log('useFocusEffect')
//     })

//     const goDetail = () => {
//         navigation.navigate('detail', { id: '100', name: '张三' })
//     }
//     return <View>
//         <Button 
//             title='点击+1'
//             onPress={()=>{
//                 setNum(num+1)
//             }}
//         />
//         <Text style={{fontSize: 60}}>{num}</Text>
//         <Text
//             onPress={goDetail}
//         >首页</Text>
//     </View>
// }
const Detail = ({ navigation, route }) => {
    useEffect(() => {
        navigation.setOptions({
            title: route.params.name,
            headerBackVisible: false,
            headerLeft: () => <AntDesign onPress={navigation.goBack} name="left" size={30} color="#000" />,
            headerRight: () => <AntDesign name="setting" size={30} color="#000" />,
        })
    }, [])

    const goHome = () => {
        navigation.replace('home')
    }
    return <View>
        <Button
            title="返回"
            onPress={navigation.goBack}
        />
        <Text>{route.params.id}</Text>
        <Text onPress={goHome}>新闻详情</Text>
    </View>
}
// const Draft = () => {
//     return <Text>Draft</Text>
// }
const Mine = () => {
    return <Text>Mine</Text>
}
const Setting = () => {
    return <Text>Setting</Text>
}
const TabBar = () => {
    return <Tab.Navigator
        screenOptions={{
            headerTitleAlign: 'center',
            headerStyle: {
                backgroundColor: '#f4511e',
            },
            tabBarStyle: {
                // backgroundColor: '#f4511e',
            },
        }}
    >
        <Tab.Screen
            name='home'
            component={Home}
            options={{
                title: '首页',
                tabBarIcon: ({ color, size, focused }) => (
                    focused
                        ? <AntDesign
                            name='home'
                            color={color}
                            size={size}
                        />
                        : <Entypo
                            name='home'
                            color={color}
                            size={size}
                        />
                )
            }}
        />
        <Tab.Screen
            name='draft'
            component={Draft}
            options={{
                title: '投稿',
                tabBarIcon: ({ color, size }) => {
                    return (
                        <Entypo
                            name='publish'
                            color={color}
                            size={size}
                        />
                    )
                }
            }}
        />
        <Tab.Screen
            name='mine'
            component={Mine}
            options={({ navigation }) => (
                {
                    title: '个人信息',
                    tabBarLabel: '我的',
                    tabBarIcon: ({ color, size }) => {
                        return (
                            <AntDesign
                                name='user'
                                color={color}
                                size={size}
                            />
                        )
                    },
                    headerRight: () => {
                        return <AntDesign
                            name="setting"
                            size={24}
                            onPress={() => navigation.navigate('setting')}
                        />
                    }
                }
            )}
        />
    </Tab.Navigator>
}
export default function App() {
    return (
        <NavigationContainer>
            <Stack.Navigator
                screenOptions={{
                    headerTitleAlign: 'center',
                    headerStyle: {
                        backgroundColor: '#f4511e',
                    },
                }}
            >
                <Stack.Screen 
                    name="tabbar"
                    component={TabBar}
                    options={
                        {
                            headerShown: false
                        }
                    }
                />
                <Stack.Screen 
                    name="detail"
                    component={Detail}
                />
                <Stack.Screen 
                    name="setting"
                    component={Setting}
                />

            </Stack.Navigator>  
        </NavigationContainer>
    );
}

const styles = StyleSheet.create({

});

// axios
// expo install axios
// npm i yarn -g
// npm i @expo/vector-icons
// yarn add @expo/vector-icons